<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>广州商学院lms-首页</title>
    <!-- <script type="text/javascript" src="js/jquery.js"></script> -->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #F2F3F4;
        }
        .zm-box {
            width: 1100px;
            height: 520px;
            margin: 40px auto;
            /* border: 1px solid #ccc; */
        }
        .zm-block-one {
            width: 265px;
            height: 350px;
            background: #01AAED;
            border-radius: 10px;
            margin-right: 15px;
            float: left;
            text-align: center;
        }
        .zm-block-one:hover {
            box-shadow: 4px 8px 20px #0085BA;
            cursor: pointer;
            animation: test2 0.5s;
            position: relative;
            bottom: 4px;
        }
        .zm-block-one:hover img {
            animation: test1 0.5s;
            transform: scale(1.1);
        }
        .zm-block-two {
            width: 265px;
            height: 350px;
            background: #FFB800;
            border-radius: 10px;
            margin-right: 15px;
            float: left;
            text-align: center;
        }
        .zm-block-two:hover {
            box-shadow: 4px 8px 20px #FFB800;
            cursor: pointer;
            animation: test2 0.5s;
            position: relative;
            bottom: 4px;
        }
        .zm-block-two:hover img {
            animation: test1 0.5s;
            transform: scale(1.1);
        }
        @keyframes test1 {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.1);
            }
        }
        @keyframes test2 {
            to {
                position: relative;
                bottom: 4px;
            }
        }
        .zm-block-three {
            float: left;
            width: 340px;
            height: 350px;
        }
        .zm-block-three div {
            height: 170px;
            background: #c2c2c2;
            margin-bottom: 10px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .zm-block-three div:hover {
            box-shadow: 4px 8px 20px #CCCCCC;
            cursor: pointer;
            animation: test2 0.5s;
            position: relative;
            bottom: 4px;
        }
        .zm-block-three div:hover img {
            animation: test1 0.5s;
            transform: scale(1.1);
        }
        .zm-block-four {
            float: left;
            width: 185px;
            height: 350px;
            border-radius: 10px;
            margin-left: 15px;
            background: #2F4056;
            text-align: center;
        }
        .zm-block-four:hover {
            box-shadow: 4px 8px 20px #2F4056;
            cursor: pointer;
            animation: test2 0.5s;
            position: relative;
            bottom: 4px;
        }
        .zm-block-four:hover img {
            animation: test1 0.5s;
            transform: scale(1.1);
        }
        .zm-block-five {
            float: left;
            width: 545px;
            height: 150px;
            margin-top: 15px;
            border-radius: 10px;
            background: #5FB878;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .zm-block-five:hover {
            box-shadow: 4px 8px 20px #5FB878;
            cursor: pointer;
            animation: test2 0.5s;
            position: relative;
            bottom: 4px;
        }
        .zm-block-five:hover img {
            animation: test1 0.5s;
            transform: scale(1.1);
        }
        .zm-block-six {
            float: left;
            width: 540px;
            height: 150px;
            margin-top: 15px;
            margin-left: 15px;
            border-radius: 10px;
            background: #FF5722;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .zm-block-six:hover {
            box-shadow: 4px 8px 20px #FF5722;
            cursor: pointer;
            animation: test2 0.5s;
            position: relative;
            bottom: 4px;
        }
        .zm-block-six:hover img {
            animation: test1 0.5s;
            transform: scale(1.1);
        }
        .footers {
            clear: both;
            width: 100%;
            height: 55px;
            background: #353535;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <script type="text/javascript" src="/static/lib/layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/lib/layui/css/layui.css"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">广州商学院-lms</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">首页</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                {if $Think.session.user}
                <a href="javascript:;">
                    {if $Think.session.user.img}
                    <img src="/uploads/{$Think.session.user.img}" class="layui-nav-img">
                    {else\}
                    <img src="/static/img/头像默认.png" class="layui-nav-img">
                    {/if}
                    {$Think.session.user->userinfo->realname}
                </a>
                {else/}
                <a href="/login">登录</a>
                {/if}
            </li>
            <li class="layui-nav-item">
                {if $Think.session.user}
                <a href="{:url('logout')}">注销</a>
                {else/}
                <a href="{:url('regist')}">注册</a>
                {/if}
            </li>
        </ul>
    </div>
</div>
<div class="zm-box">
    <div class="zm-block-one" onclick="lab_app()">
        <img src="/static/img/教室状态，上课.svg" alt="" width="150px" height="150px" style="margin: 60px 0px 15px 0px;">
        <h2 style="color: #FFF;">实验室预约</h2>
    </div>
    <div class="zm-block-two" onclick="tool_app()">
        <img src="/static/img/工具.svg" alt="" width="140px" height="140px" style="margin: 75px 0px 15px 0px;">
        <h2 style="color: #FFF;">器具借用</h2>
    </div>
    <div class="zm-block-three">
        <div onclick="teacher_list()">
            <img src="/static/img/老师.svg" alt="" width="75px" height="75px" style="margin-right: 10px;">
            <h2 style="color: #FFF;">联系教师</h2>

        </div>
        <div style="margin-bottom: 0px;background: lightpink;" onclick="lab_yuyue()">
            <img src="/static/img/进度.svg" alt="" width="75px" height="75px" style="margin-right: 10px;">
            <h2 style="color: #FFF;">预约进度</h2>
        </div>
    </div>
    <div class="zm-block-four" onclick="notice()">
        <img src="/static/img/公告.svg" width="75px" height="75px" style="margin-top: 100px;">
        <h2 style="color: #FFF;">公告通知</h2>
    </div>
    <div class="zm-block-five" onclick="about_me()">
        <img src="/static/img/我的.svg" width="75px" height="75px" style="margin-right: 10px;">
        <h2 style="color: #FFF;">关于我的</h2>
    </div>
    <div class="zm-block-six" onclick="feedback()">
        <img src="/static/img/反馈中心on.svg" width="75px" height="75px" style="margin-right: 10px;">
        <h2 style="color: #FFF;">问题反馈</h2>
    </div>
</div>

<div class="footers">
    <div>
        <span style="color: #FFF;">Copyright-2018-实验室管理系统网</span>
    </div>
</div>
</body>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });

    function feedback() {
        window.location.href = "{:url('feedback')}"
    }

    function about_me() {
        window.location.href = "{:url('about_me')}"
    }

    function notice() {
        window.location.href = "{:url('notice')}"
    }
    function lab_app() {
        window.location.href = "{:url('lab_empty')}"
    }
    function lab_yuyue() {
        window.location.href = "{:url('lab_app_list')}"
    }
    function teacher_list() {
        window.location.href = "{:url('teacher_list')}"
    }
    function tool_app() {
        window.location.href = "{:url('tool_small_app')}"
    }
</script>
</html>